<template>
  <div v-if="bol">
    <!-- 头部区域 -->
    <div class="header" v-if="showTop">
      <!-- 毛玻璃化背景图 -->
      <div class="bg">
        <img id="blur" :src="base + list.logo" alt="" />
      </div>
      <!-- 顶部箭头 -->
      <van-nav-bar left-arrow @click-left="onClickLeft" class="toparrow">
        <template #left>
          <van-icon name="down" style="transform: rotate(90deg)" />
        </template>
        <template #right>
          <i class="iconfont iconxingxing2 i1"></i>
          <i class="iconfont iconbtn_share i2"></i>
        </template>
      </van-nav-bar>
      <!-- 公司信息区域 -->
      <div class="contant">
        <span class="title">{{ list.name }}</span>
        <div class="info1">
          <span class="s1">{{ list.type }}</span>
          <span class="s1">{{ list.step }}</span>
          <span class="s1">{{ list.scale }}</span>
        </div>
        <div class="info2">
          <span class="s2"
            ><i class="iconfont iconicon_gongsi_time"></i>
            {{ list.workTime }}</span
          >
          <span class="s2"
            ><i class="iconfont iconicon_gongsi_sx"></i>{{ list.restDay }}</span
          >
          <span class="s2"
            ><i class="iconfont iconicon_gongsi_jiaban"></i>
            {{ list.overtime }}</span
          >
        </div>
        <div class="logo">
          <img class="logoImg" :src="base + list.logo" alt="" />
        </div>
      </div>
      <!-- 公司福利区域 -->
      <van-tabs
        class="welfare"
        background="rgba(255, 255, 255, 0)"
        title-inactive-color="#fff"
        title-active-color="#fff"
        line-width="0"
        line-height="0"
        swipe-threshold="4"
      >
        <van-tab v-for="item in list.weals" :key="item.id">
          <template #title>
            <i :class="`iconfont ${item.icon}`"></i>{{ item.text }}
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 主体区域 -->
    <div class="content">
      <!-- 公司地址 -->
      <div class="middle">
        <van-nav-bar class="address">
          <template #left>
            <span class="leftText">公司地址</span>
          </template>
          <template #right>
            <span class="rightText"
              >全部地址<van-icon name="arrow" class="arrow"
            /></span>
          </template>
        </van-nav-bar>
        <div class="addres2">
          <span class="s1">{{ list.address }}</span>
          <span class="s2">距离当前50m，步行需要57秒</span>
          <span class="s3"
            ><i class="iconfont iconicon_gongsi_daohang"></i> 导航</span
          >
        </div>
      </div>
      <!-- 公司简介 -->
      <div class="intro">
        <span>公司简介</span>
        <p :class="{ comp_info: isShow }">
          {{ list.desc }}
        </p>
        <div
          style="text-align:center;font-size:12px"
          v-if="isShow"
          @click="isShow = !isShow"
        >
          查看更多
          <i class="iconfont iconicon_zhankai" v-if="isShow"></i>
        </div>
      </div>
      <!-- 公司照片 -->
      <div class="photo">
        <span>公司照片</span>
        <!-- 图片预览 -->
        <van-image-preview
          :startPosition="index"
          v-model="show"
          :images="images"
          @change="onChange"
        >
          <template v-slot:index>第{{ index + 1 }}页</template>
        </van-image-preview>
        <van-tabs
          class="tabs2"
          background="rgba(255, 255, 255, 0)"
          title-inactive-color="#000"
          title-active-color="#000"
          line-width="0"
          line-height="0"
          sticky
        >
          <van-tab
            class="tab2"
            v-for="(item, index) in list.sliders"
            :key="index"
          >
            <template #title>
              <img :src="base + item" alt="" @click="getImg(index)" />
            </template>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 工商信息 -->
      <div class="busInfo">
        <span class="title">工商信息</span>
        <p>
          公司全称 <span>{{ list.fullname }}</span>
        </p>
        <p>
          成立时间 <span>{{ list.created_at | formatData }}</span>
        </p>
        <p>
          注册资本 <span>{{ list.capital }}</span>
        </p>
        <p>
          法人代表 <span>{{ list.legalPerson }}</span>
        </p>
        <p>
          信息来源 <span>{{ list.messageSource }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'CompanyInfo',
  props: {
    isDel: { type: Boolean, default: false }
  },
  data () {
    return {
      showTop: false,
      list: [],
      base: process.env.VUE_APP_URL,
      bol: true,
      isShow: true,
      // 是否显示预览
      show: false,
      // 预览起始图片索引
      index: 0,
      // 预览图片数组
      images: []
    }
  },
  async created () {
    this.$toast.loading({ message: '加载中' })
    await this.getDetailList(this.$route.params.id)
    this.$nextTick(() => {
      this.$toast.clear()
    })
    this.$emit('input', true)
    this.formatBase()
    this.list = this.detailList
    this.showTop = true
  },
  computed: {
    ...mapState('companyDetail', ['detailList'])
  },
  methods: {
    ...mapActions('companyDetail', ['getDetailList']),
    // 格式基地址
    formatBase () {
      this.base = this.base.substr(0, this.base.length - 1)
    },
    onClickLeft () {
      // this.$router.push(this.$route.query.redirect)
      this.$router.push('/')
    },
    // 预览图片
    getImg (index) {
      // console.log('index: ', index)
      this.index = index
      // console.log('this.index: ', this.index)
      this.show = true
      this.images = this.list.sliders.map(item => {
        return this.base + item
      })
    },
    // 改变预览图片索引
    onChange (index) {
      this.index = index
    }
  },

  watch: {
    list: {
      handler (newVal) {
        if (newVal) {
          this.bol = false
          this.$nextTick(() => {
            this.bol = true
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 顶部区域样式
.header {
  z-index: 999;
  width: 100%;
  height: 460px;
  // background: rgba(0, 0, 0, 0.5);
  background-color: #333;
  color: #fff;
  font-size: 24px;
  position: fixed;
  top: 0;
  // 毛玻璃背景样式
  .bg {
    width: 100%;
    position: fixed;
    top: 0;
    height: 460px;
    overflow: hidden;
    #blur {
      width: 100%;
      // height: 100%;
      filter: blur(50px);
      -webkit-filter: blur(40px);
      -moz-filter: blur(50px);
      -ms-filter: blur(50px);
      -o-filter: blur(50px);
      opacity: 0.5;
    }
  }
  // 顶部箭头
  .toparrow {
    background: rgba(255, 255, 255, 0);
    ::v-deep .van-icon {
      color: #fff;
      font-size: 40px;
    }
    ::v-deep .van-nav-bar__right {
      padding-right: 25px;
      margin-top: 10px;
      i {
        font-size: 35px;
      }
      .i2 {
        margin-top: 7px;
        margin-left: 10px;
      }
    }
  }
  ::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0px;
  }
  // 公司信息区域
  .contant {
    margin-top: 32px;
    padding: 0 30px;
    position: relative;
    .title {
      font-size: 40px;
      font-weight: 600;
    }
    .info1 {
      margin-top: 30px;
      .s1 {
        width: 118px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #ffffff;
        border-radius: 6px;
        padding: 1.5px 10px;
        text-align: center;
        margin-right: 13px;
      }
    }
    .info2 {
      margin-top: 30px;
      .s2 {
        margin-right: 35px;
        i {
          vertical-align: -10%;
        }
      }
    }
    .logo {
      position: absolute;
      top: 0;
      right: 31px;
      .logoImg {
        width: 115px;
        height: 115px;
        border: 1px solid #ffffff;
        border-radius: 13px;
        overflow: hidden;
      }
    }
  }
  // 公司福利区域
  .welfare {
    margin-top: 30px;
    ::v-deep .van-tabs__wrap {
      height: 90px;
      padding-left: 7px;
    }
    ::v-deep .van-tab {
      font-size: 24px;
      // width: 198px;
      height: 90px;
      line-height: 90px;
      border: 1px solid #ffffff;
      border-radius: 13px;
      margin-right: 18px;
      i {
        display: inline-block;
        vertical-align: -5%;
        font-size: 35px;
        width: 48px;
        height: 48px;
      }
    }
  }
  // 公司地址
}
// 主体区域
.content {
  background-color: #fff;
  padding-top: 480px;
  // 公司地址
  ::v-deep .van-hairline--bottom::after {
    border: 0;
  }
  .middle {
    .address {
      padding-top: 20px;
      background: rgba(255, 255, 255, 0);
      .leftText {
        font-size: 36px;
        font-weight: 700;
        color: #181a39;
      }
      .rightText {
        font-size: 28px;
        color: #5b5d75;
      }
      .arrow {
        font-size: 30px;
        color: #5b5d75;
        vertical-align: -10%;
      }
    }
    .addres2 {
      padding: 0 30px;
      position: relative;
      .s1,
      .s2,
      .s3 {
        display: block;
        margin-bottom: 20px;
      }
      .s1 {
        font-size: 30px;
        width: 70%;
      }
      .s2 {
        width: 70%;
        font-size: 24px;
        color: #b4b4bd;
      }
      .s3 {
        width: 140px;
        height: 64px;
        line-height: 64px;
        border: 2px solid #b4b4bd;
        border-radius: 319px;
        font-size: 28px;
        color: #5b5d75;
        text-align: center;
        position: absolute;
        top: 0;
        right: 36px;
      }
    }
  }
  // 公司简介
  .intro {
    padding: 0 33px;
    margin-top: 40px;
    span {
      display: inline-block;
      font-size: 36px;
      font-weight: 700;
      color: #181a39;
      margin-bottom: 30px;
    }
    p {
      font-size: 30px;
      color: #181a39;
      line-height: 45px;
      letter-spacing: 0.34px;
    }
  }
  // 公司照片
  .photo {
    padding: 0 33px;
    margin-top: 40px;
    span {
      display: inline-block;
      font-size: 36px;
      font-weight: 700;
      color: #181a39;
      margin-bottom: 30px;
    }
    .tabs2 {
      color: #000;
      height: 180px;
      margin-top: 0;
      ::v-deep .van-tab {
        width: 295px;
        height: 166px;
        border: 1px solid #000;
        border-radius: 13px;
        margin-right: 20px;
        padding: 0;
        img {
          width: 100%;
        }
      }
      ::v-deep .van-tabs__wrap {
        height: 166px;
        padding-left: 7px;
      }
      ::v-deep .van-tabs__nav {
        padding-left: 0;
      }
    }
  }
  // 工商信息
  .busInfo {
    padding: 0 33px;
    margin-top: 40px;
    .title {
      display: inline-block;
      font-size: 36px;
      font-weight: 700;
      color: #181a39;
      margin-bottom: 40px;
    }
    p {
      font-size: 30px;
      color: #b4b4bd;
      margin-bottom: 31px;
      span {
        color: #545671;
        margin-left: 81px;
      }
    }
  }
}
.comp_info {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
// .rotate {
//   transform: rotate(180deg) !important;
// }
</style>
